<template>
  <div>
    <tableForm :formOptions="formOptions" :formData="formData" @submit="submit"></tableForm>
  </div>
  <div>{{ state }}</div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
const emit = defineEmits(['changeComponent'])
const props = defineProps({
  state: {
    type: Object,
    default: () => {}
  }
})
const formData = ref({})
const formOptions = ref([
  { label: '姓名', key: 'name', span: 8, type: 'input' },
  { label: '内容', key: 'content', span: 8, type: 'input', inputType: 'textarea', rows: '3' },
  {
    label: '标签',
    key: 'status',
    span: 8,
    type: 'select',
    selectOpt: [
      { label: '启用', value: '启用' },
      { label: '禁用', value: '禁用' }
    ]
  }
])

watch(
  () => props.state,
  () => {
    if (props.state.title === 'demand2') {
      formData.value = props.state.formData
      formOptions.value = props.state.formOptions
    }
    console.log('数据')
  },
  // immediate: true，立即执行。相当于组件加载的时候执行事件
  { deep: true, immediate: true }
)
const submit = data => {
  let obj = {}
  obj.title = 'demand1'
  obj.data = data
  emit('changeComponent', obj)
  console.log(obj)
}
</script>
<style scoped></style>
